<template>
    <div>
        <el-card style="max-width: 66%">
            <template #header>
                <div class="card-header">
                <el-button type="success" size="default" @click="createShopType">添加店铺类别</el-button>
                </div>
            </template>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="shopCategoryId" label="序号" width="50px" align="center" />
                <el-table-column prop="categoryName" label="店铺分类名称" align="center" />
                <el-table-column label="操作" width="270px" align="center">
                    <template #default="scoped">
                        <el-button type="primary" @click="changeShopType(scoped.row), update = true">修改</el-button>
                        <el-button type="danger" @click="delShopType(scoped.row)">删除</el-button>
                        
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
            </template>
        </el-card>
        <!-- 修改和添加店铺类别的界面 -->
        <el-dialog v-model="update" :title="title" width="500">
            <el-form :model="shopTypeDate">
                <el-form-item label="店铺分类名称" prop="categoryName">
                    <el-input v-model="shopTypeDate.categoryName" placeholder="请输入店铺分类名称" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="update = false">取消</el-button>
                    <el-button type="primary" @click="updateShopType()" v-if="this.know == 0">提交</el-button>
                    <el-button type="primary" @click="addShopType()" v-else>确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import * as shopTypeApi from "@/api/shop.js";
export default {

    data() {
        return {
            //识别修改（1）和添加（0）按钮
            know:0,

            tableData: [],

            // 修改和添加按钮的默认值
            update: false,

            // 分页相关参数
            total: [],

            // 修改和添加店铺类别的界面的标题
            title: "",

            shopTypeDate:{
                shopCategoryId:"",
                categoryName: "",
            },
        }
    },
    methods: {


        // 删除按钮
        delShopType(row) { 
            this.shopTypeDate = row;
            shopTypeApi.delShopTypeApi({...this.shopTypeDate,op:"del"}).then(resp => {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                });
                this.loadShopCategory();
            })
        },

        // 修改按钮
        changeShopType(row) { 
            this.shopTypeDate = row;
            this.title = "修改店铺类别";
            this.update = true;
            this.know = 0;
         },
        
        createShopType(){
            this.title = "添加店铺类别";
            this.update = true;
            this.know = 1;
        },

        // 添加按钮
        addShopType(){
            shopTypeApi.addShopTypeApi({...this.shopTypeDate,op:"add"}).then(resp => {
                ElNotification({
                    title: '添加成功',
                    message: '添加成功',
                    type: 'success',
                });
                this.loadShopCategory();
                this.shopTypeDate = {};
                this.update = false;
            })
        },

        // 修改店铺类别
        updateShopType() {
            shopTypeApi.updateShopTypeApi({...this.shopTypeDate,op:"update"}).then(resp => {
                ElNotification({
                    title: '修改成功',
                    message: '修改成功',
                    type: 'success',
                });
                this.loadShopCategory();
                this.shopTypeDate = {};
                this.update = false;
            })
        },


        // 加载数据
        loadShopCategory() {
            shopTypeApi.shopTypeApi({op:"get"}).then(resp => {
                this.tableData = resp.data;
            })
        },
    },
    created() {
        this.loadShopCategory();
    }

}
</script>

<style scoped>

</style>